<script setup lang="ts">
import { useStore } from 'vuex'
import { computed, reactive, onMounted, toRaw } from 'vue'
import { isEmpty } from 'lodash';

const store = useStore()
const person = reactive({
    name: 'huilin',
    age: 32,
})
const count = computed(() => store.state.count)
const components = computed(() => store.state.componentIdArray)

store.commit('setCompId')
// setTimeout(() => {
// }, 5000)


function dynamicModule() {
    // console.log('dynamicModule come in')
    store.registerModule(['dynamic_dataset', 'kanban'], {
        state: {
            components: [],
        }
    })
}

onMounted(() => {
    // console.log('person', person)
    // console.log('count', count.value)
    // console.log('isEmpty', isEmpty(person))
    // console.log('componentIdArray', toRaw(components.value))
    if (store.hasModule('dynamic_dataset')) {
        store.unregisterModule('dynamic_dataset')
    }
    store.registerModule('dynamic_dataset', {})
})
</script>

<template>
    <div>
        <!-- <Vue3Lottie :animationData="AstronautJSON" :height="200" :width="200" /> -->
        store count: {{ count }}
        person {{ person }}
        <a href="https://vitejs.dev" target="_blank">
            <img src="/vite.svg" class="logo" alt="Vite logo" />
        </a>
        <a href="https://vuejs.org/" target="_blank">
            <img src="~@assets/vue.svg" class="logo vue" alt="Vue logo" />
        </a>
        <button @click="dynamicModule">动态注册模块</button>
    </div>
</template>

<style lang="scss" scoped>
div {
    color: $orange;
}
</style>
